<template>
  <div class="app-container">
    <h1 style="display: flex;justify-content: center;align-items: center;">
      {{this.queryParams.questionnaireName}}
    </h1>
    <h4 class="form-header h4">基本信息</h4>




    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-row>
        <el-col :span="18" :offset="2">
          <el-form-item label="是否参加本次疗休养" prop="isAttend" label-width="150px">
            <el-radio-group v-model="form.isAttend">
              <el-radio label="0" >参加</el-radio>
              <el-radio label="1" >不参加</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="18" :offset="2">
          <el-form-item label="是否携带家属" prop="isBringdepe" label-width="150px">
            <el-radio-group v-model="form.isBringdepe">
              <el-radio label="0" >携带</el-radio>
              <el-radio label="1">不携带</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span="8" :offset="2">
          <el-form-item label="预计携带家属个数" prop="dependentNum" label-width="150px">
            <el-input v-model="form.dependentNum" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>


    <h4 class="form-header h4">路线投票</h4>
    <h4 >教职工剩余票数：{{this.voteNum}}</h4>
    <div v-for="(item, index) in routeList" class="con1">
      <el-carousel :interval="5000" arrow="always" style="background-color: aliceblue;">
        <el-carousel-item v-for="(img) in item.pic.split(',')">
          <el-image
            style="width: 500px; height: 350px; margin-top: -25px; margin-bottom: 10px;"
            :src="img"
            :fit="cover"
          ></el-image>
        </el-carousel-item>
      </el-carousel>

      <span>
        <el-button type="text" style="font-size: larger;">
          <a :href="item.url" target="_blank" class="buttonText">{{ item.name }}</a>
        </el-button>
      </span>
      <br>
      <span>投票人数：{{ getVotes(item.id) }}</span>
      <br>
      <div style="float: right;">
        <el-button
          :type="isVoted(item.id) ? 'danger' : 'primary'"
          @click="toggleVoteStatus(item.id)"
          :disabled="isVoted(item.id) && voteNum === -1"
          style="float: right;"
        >
          {{ isVoted(item.id) ? '取消投票' : '投票' }}
        </el-button>
      </div>
    </div>
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <el-form label-width="100px">
      <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
        <el-button type="primary" @click="submitForm()">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>


<script>
import { listRoute } from "@/api/lxy/route";
import { addQuestionnaireReslut } from "@/api/lxy/questionnaireReslut";
import { listQuestionnaire,getQuestionnaire} from "@/api/lxy/questionnaire";
import Item from "@/layout/components/Sidebar/Item.vue";
import {id} from "postcss-selector-parser";

export default {
  name: "QuestionnaireReslut",
  computed: {
    Item() {
      return Item
    }
  },

  data() {
    return {
      //投票数量
      voteNum: 0,
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 问卷结果表格数据
      questionnaireReslutList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      routeList: [
        { id: 1, name: '路线1', url: 'URL1', pic: 'image1.jpg,image2.jpg' },
        { id: 2, name: '路线2', url: 'URL2', pic: 'image3.jpg,image4.jpg' },
        // 其他路线
      ],
      // 查询参数
      queryParams: {
        pageNum: undefined,
        pageSize: undefined,
        questionnaireId: undefined,
        userId: undefined,
        isAttend: undefined,
        intendedRoute: [], // 存储已投票的路线ID
        isBringdepe: undefined,
        dependentNum: undefined,
      },
      // 表单参数
      form: {},
      xAxisData: [],
      yAxisData: [],

      votePeopleSum: 0,
      dependentVoteSum: 0,


    };
  },
  created() {
    this.getList();
    this.getQuestionnaireById();
    // this.getVotes();
  },
  methods: {
    /**提交按钮操作 */
      submitForm() {
      this.$refs["form"].validate(valid => {
          this.buttonLoading = true;
          this.form.userId = 1;
          this.form.questionnaireId = this.queryParams.questionnaireId;
          this.form.intendedRoute = this.queryParams.intendedRoute;
          addQuestionnaireReslut(this.form).then(response => {
              this.$modal.msgSuccess("投票提交成功");
              this.open = false;
              this.getList();
            }).finally(() => {
              this.buttonLoading = false;
            });
          }
      );
    },
    /** 查询问卷结果列表 */
    getList() {
      this.queryParams.questionnaireId = this.$route.params && this.$route.params.id;
      this.queryParams.projectId = this.$route.query.projectId;
      this.queryParams.questionnaireName = this.$route.query.questionnaireName;

      this.loading = true;
      listRoute(this.queryParams).then(response => {
        this.routeList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    getVotes(routeId) {
      return this.routeList.find((route) => route.id === routeId)?.votes || 0;
    },
    isVoted(routeId) {
      return this.queryParams.intendedRoute.includes(routeId);
    },
    toggleVoteStatus(routeId) {
      if (this.isVoted(routeId)) {
        // 如果当前路线已被投票，取消投票，将其ID从已投票的数组中移除
        this.queryParams.intendedRoute = this.queryParams.intendedRoute.filter((id) => id !== routeId);
        this.routeList.find((route) => route.id === routeId).votes -= 1;
        this.voteNum += 1; // 增加可投票数量
      } else if (this.voteNum > 0) {
        // 如果当前路线未被投票，且还有可投票数量，投票并将其ID添加到已投票的数组
        this.queryParams.intendedRoute.push(routeId);
        this.routeList.find((route) => route.id === routeId).votes += 1;
        this.voteNum -= 1; // 减少可投票数量
      }else {
        // 如果可投票数量已经用完，显示弹出框通知用户
        this.$message.error('可投票数已达上限');
      }
    },
    getQuestionnaireById(){
      getQuestionnaire(this.queryParams.questionnaireId).then(response => {
        this.voteNum = response.data.voteNum;
      });
    },
  }
};
</script>


<style>
.con1 {
  width: 500px;
  height: 450px;
  margin: 20px;
  padding: 50px;
  display: inline-block;
  /* float: left; */
  /* background-color:rgba(222, 222, 222, 0.715); */
}
</style>

